import FirstTitle from "@/components/FirstTitle";
import SubTitle from "@/components/subTitle";
import EffectContainer from "@/components/effectContainer";
import BroadcastChannelHtml1 from "./broadcastChannel/1.js";
import BroadcastChannelHtml2 from "./broadcastChannel/2.js";
import LocalStorageHtml1 from "./localStorage/1.js";
import LocalStorageHtml2 from "./localStorage/2.js";
import { useEffect, useState } from "react";
import { getCode } from "@/api/codeApi.ts";
import Code from "@/components/code";
export const Communication = () => {
  const [BroadcastChannelCode, setBroadcastChannelCode] = useState("");
  const [LocalStorageCode, setLocalStorageCode] = useState("");
  useEffect(() => {
    getCode("/communication/BroadcastChannel代码.txt").then(({ data }) => {
      setBroadcastChannelCode(data);
    });
    getCode("/communication/LocalStorage代码.txt").then(({ data }) => {
      setLocalStorageCode(data);
    });
  }, []);
  return (
    <>
      <FirstTitle title="跨标签通信" />
      <SubTitle title="BroadcastChannel"></SubTitle>

      <EffectContainer
        effect={
          <div
            style={{ display: "flex", justifyContent: "space-between" }}
            className="iframe-box"
          >
            <iframe
              style={{ width: "48%" }}
              srcDoc={BroadcastChannelHtml1}
              frameBorder="0"
            ></iframe>
            <iframe
              style={{ width: "48%" }}
              srcDoc={BroadcastChannelHtml2}
              frameBorder="0"
            ></iframe>
          </div>
        }
        code={<Code content={BroadcastChannelCode} />}
      />

      <SubTitle title="LocalStorage"></SubTitle>

      <EffectContainer
        effect={
          <div
            style={{ display: "flex", justifyContent: "space-between" }}
            className="iframe-box"
          >
            <iframe
              style={{ width: "48%" }}
              srcDoc={LocalStorageHtml1}
              frameBorder="0"
            ></iframe>
            <iframe
              style={{ width: "48%" }}
              srcDoc={LocalStorageHtml2}
              frameBorder="0"
            ></iframe>
          </div>
        }
        code={<Code content={LocalStorageCode} />}
      />
    </>
  );
};
